﻿<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<title>cardistry</title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/module.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body style="padding:20px;">
<!-- opus -->
<div class="opus">
	<a href="" class="op-cont op-article">
		<p>本杂志应广大读者的要求（他们中的有些人把枪顶着我的后背），冒着生命危险（几次从窗户里被扔出来），不折不挠（耗费了我美好阳光下的一整年的假期），终于完成了（长舒一口气感谢十五又圆又大的月亮）这些划时代的调查。由于时间所限，我只好随意地罗列出来了:</p>
		<strong>文字标题</strong>
		<b><span class="icon">^</span></b>
	</a>
	<div class="op-des">
		<a href="" class="op-des-func"><span class="icon">é</span>编辑</a>
		<a href="" class="op-des-func"><span class="icon">ç</span>删除</a>
		<span class="op-des-time">2014-05-06</span>
	</div>
</div>
<div class="opus">
	<a href="" class="op-cont op-movie">
		<img src="img/movie/1.png" width="260" height="170" />
		<strong>视频标题</strong>
		<i></i>
		<b><span class="icon">N</span></b>
	</a>
	<ul class="op-info">
		<li><span class="icon">\</span>：2400</li>
		<li><span class="icon">g</span>：242</li>
		<li><span class="icon">c</span>：54</li>
	</ul>
	<div class="op-des">
		<a href=""><span class="icon">Ü</span>作者姓名</a>
		<span class="op-des-time">2014-05-06</span>
	</div>
</div>


<div class="opus">
	<a href="" class="op-cont op-image">
		<img src="img/movie/2.png" width="250" height="155" />
		<strong>images title in English</strong>
		<b><span class="icon">A</span></b>
	</a>
	<ul class="op-info">
		<li><span class="icon">\</span>：2400</li>
		<li><span class="icon">g</span>：242</li>
		<li><span class="icon">c</span>：54</li>
	</ul>
	<div class="op-des">
		<a href=""><span class="icon">Ü</span>作者姓名</a>
		<span class="op-des-time">2014-05-06</span>
	</div>
</div>


<!-- personalcard -->
<div class="personalcard">
	<div class="pcd-l">
		<a href="" class="pcd-photo">
			<img src="img/movie/1.png">
		</a>
		<div class="pcd-num">
			<a href="javascript:void(0)">
				<strong>7</strong>
				<span>人气</span>
			</a>
			<a href="javascript:void(0)">
				<strong>9</strong>
				<span>作品</span>
			</a>
		</div>
	</div>
	<div class="pcd-r">
		<span class="pcd-name">用户名<em class="pcd-rank">资深玩家</em></span>
		<span class="pcd-address">我在：中国 北京</span>
		<dl class="pcd-skill">
			<dt>擅长技术：</dt>
			<dd>----- 花式<em>(cardistry)</em></dd>
			<dd>----- 硬币<em>(coin)</em></dd>
			<dd>----- 心灵</dd>
		</dl>
	</div>
	<div class="pcd-clear"></div>
	<div class="pcd-foot">
		<div class="pcd-func clearfix">
			<a href=""><span class="icon">É</span>私信<b>(99+)</b></a>
			<a href=""><span class="icon">á</span>好友<b>(12)</b></a>
			<a href=""><span class="icon">j</span>团队</a>
			<a href=""><span class="icon">X</span>设置</a>
		</div>
	</div>
</div>

<br /><br />
<!-- personalnav -->
<ul class="personalnav clearfix">
	<li class="pnav-line"><a href="">我的作品</a></li>
	<li class="pnav-block">
		<a href="" class="pnav-l">
			<strong>学院</strong>
			<span>精英玩家训练营</span>
		</a>
		<a href="" class="pnav-r">
			<strong>挑战</strong>
			<span>I'm Super Hero</span>
		</a>
	</li>
	<li class="pnav-block">
		<a href="" class="pnav-l">
			<strong>其他</strong>
			<span>nothing</span>
		</a>
		<a href="" class="pnav-r">
			<strong>其他</strong>
			<span>nothing</span>
		</a>
	</li>
</ul>

<br /><br />
<!-- publishbtn -->
	<div class="publishnav clearfix">
		<a href="#" class="pnav-first"><span class="icon">q</span></a>
		<a href="#"><span class="icon">a</span><em>文章</em></a>
		<a href="#"><span class="icon">@</span><em>视频</em></a>
		<a href="#"><span class="icon">A</span><em>图集</em></a>
	</div>

<br /><br />
<!--personalletter -->
<div class="personalletter">
	<div class="plt-box">
		<a href="javascript:void(0)">
			<span class="plt-photo"><img src="img/movie/1.png" /></span>
			<span class="plt-info">from：<strong>用户名</strong>(用户名)</span>
			<span class="plt-info">time：星期三，10:30 PM</span>
			<span class="plt-info">latest letter：我想和你交个朋友...</span>
			<span class="plt-num">5</span>
			<span class="icon plt-delete">ã</span>
		</a>
	</div>

	<div class="plt-box">
		<a href="javascript:void(0)">
			<span class="plt-photo"><img src="img/movie/1.png" /></span>
			<span class="plt-info">from：<strong>用户名</strong>(用户名)</span>
			<span class="plt-info">time：星期三，10:30 PM</span>
			<span class="plt-info">latest letter：我想和你交个朋友...</span>
			<span class="plt-num">99+</span>
			<span class="icon plt-delete">ã</span>
		</a>
	</div>
</div>

<br /><br />

<!-- friends -->
<div class="friendslist clearfix">
	<div class="frl-box">
		<a href="" class="frl-photo"><img src="img/movie/1.png" /></a>
		<a href="" class="frl-info">备注:<strong>用户名</strong></a>
		<span class="frl-info">天津，宝坻区</span>
		<div class="frl-func">
			<a href="javascript:void(0)" class="button btn-green"><span class="icon">{</span>加好友</a>
		</div>
	</div>
	<div class="frl-box">
		<a href="" class="frl-photo"><img src="img/movie/1.png" /></a>
		<a href="" class="frl-info">备注:<strong>用户名</strong></a>
		<span class="frl-info">天津，宝坻区</span>
		<div class="frl-func">
			<a href="javascript:void(0)" class="button btn-blue">私信</a>
			<a href="" class="frl-delete"><span class="icon">ç</span>删除</a>
		</div>
	</div>
</div>

<br /><br />
<!-- btn -->
<a href="javascript:void(0)" class="button btn-green">按钮</a>
<a href="javascript:void(0)" class="button btn-big btn-green">按钮<em>说明文字</em></a>
<a href="javascript:void(0)" class="button btn-blue">按钮</a>
<a href="javascript:void(0)" class="button btn-big btn-blue">按钮<em>说明文字</em></a>
<a href="javascript:void(0)" class="button btn-gray">按钮</a>
<a href="javascript:void(0)" class="button btn-big btn-gray">按钮<em>说明文字</em></a>
<br />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript">
	//当前页js
	$('.opus a').hover(function(){
		$(this).find('b').fadeIn();
	},function(){
		$(this).find('b').stop().fadeOut();
	});

	$('.plt-delete').hover(function(){
		$(this).addClass('plt-delete-hover');
	},function(){
		$(this).removeClass('plt-delete-hover');
	})


</script>

</body>
</html>